<!--
 * @Date: 2025-01-06 09:42:41
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2025-01-10 10:40:55
 * @Description: 表单管理示例
-->
<template>
  <LayoutFull :enableHeader="false" >
    <template #aside>
      <div class="hm-aside">
        <div class="hm-aside-header">
          <div class="header-label">
            <span>主页分类</span>
          </div>
          <div class="header-tools">
            <el-icon size="18px"><Setting /></el-icon>
          </div>
        </div>
        <div class="hm-aside-content">
          <RkTreePanel :="treeAttrs" @currentChange="onTypeTreeChange" />
        </div>
      </div>
    </template>
    <template #main>
      <rk-grid
        ref="tableRef"
        :="tableAttrs"
        :params="tableParams"
      >
        <template #toolbar_left>
          <el-button type="primary" @click="toolBtnOperate('add')">新增</el-button>
          <el-button type="primary" @click="toolBtnOperate('encrypt')">加密</el-button>
          <el-button type="primary" @click="toolBtnOperate('press')">压缩</el-button>
        </template>
        <template #toolbar_right>
          <el-input
            v-model="tableParams.keyWords"
            clearable
            style="width: 200px"
            placeholder="请输入名称/编码"
            @change="tableSearch"
          />
        </template>
        <template #operation="{row}">
          <el-button link type="primary" @click="tableRowOperate('edit', row)">修改</el-button>
          <el-button link type="primary" @click="tableRowOperate('preview', row)">预览</el-button>
          <el-button link type="primary" @click="tableRowOperate('copy', row)">复制</el-button>
        </template>
      </rk-grid>
    </template>
    <FpDesignDrawer ref="fpDesignRef" @success="tableSearch"/>
    <FpPreviewDrawer ref="fpPreviewRef" />
  </LayoutFull>
</template>
<script setup>
import { reactive } from 'vue';

import { Setting } from '@element-plus/icons-vue'
import { RkTreePanel } from '@/components/tree';
import { FpDesignDrawer, FpPreviewDrawer } from '@fp/drawer'

import { SM4Utils } from '@/utils/crypto'
import * as PressUtils from '@/utils/press.js'


// 左侧分类树属性配置
const treeAttrs = reactive({
  treeTitle: '',
  serverConfig: {
    url: '/dict/getFromProcessClassifyByType',
    params: { type: 1 }, // type: 1-表单 2-流程
  }
})
// 数据结构数据集
const treeState = reactive({
  activeData: null,
  activeNode: {},
})
/**
 * 树节点变换
 * 
 * @param data 选中的数据
 * @param node 选中的节点
 */
const onTypeTreeChange = (data, node) => {
  treeState.activeData = data
  treeState.activeNode = node
  tableSearch()
}

const tableRef = ref()
const tableAttrs = reactive({
  dataUrl: '/prdFormInfo/queryPrdFormInfoPageList',
  keyField: 'formId',
  autoLoad: false,
  boxConfig: true,
  columns: [
    {
      field: 'status', title: '状态', width: 120, align: 'center',
      cellRender: { name: 'enumsRender', enumName: 'COMMON_STOP_OPEN_ENUMS', isTag: true },
    },
    { field: 'name', title: '名称', align: 'left', width: 350, headerAlign: 'center' },
    { field: 'code', title: '编码', align: 'left', width: 300, headerAlign: 'center' },
    { field: 'createTime', title: '创建时间', width: 200, showOverflow: true, align: 'center' },
    { field: 'operation', title: '操作', width: 150, showOverflow: true, align: 'center', slots: { default: 'operation' } },
  ]
})
const tableParams = reactive({
  status: undefined,
  formType: undefined,
  keyWords: undefined,
})
const tableSearch = () => {
  const { activeData } = treeState
  if (!activeData) ReturnType
  tableParams.formType = activeData.code
  nextTick(() => { tableRef.value.searchEvent() })
}
/**
 * 工具按钮操作
 * 
 * @param type 类型
 * @param text 操作名称
 */
const toolBtnOperate = (type) => {
  switch (type) {
    case 'add':
      handleAdd()
      break;
    case 'press':
      handlePress()
      break;
    case 'encrypt':
      handleEncrypt()
      break;
    default:
      break;
  }
}
/**
 * 表格数据行操作
 * 
 * @param type 类型
 * @param item 数据
 */
const tableRowOperate = (type, item) => {
  switch (type) {
    case 'edit':
      handleEdit(item)
      break;
    case 'copy':
      handleEdit(item)
      break;
    case 'preview':
      handlePreview(item)
      break;
    default:
      break;
  }
}

// 设计抽屉的Ref
const fpDesignRef = ref()
// 预览抽屉的Ref 
const fpPreviewRef = ref()
/**
 * 新增
 */
const handleAdd = () => {
  const { activeData } = treeState
  if (!activeData) return
  if (activeData.children && activeData.children.length) {
    ElMessage.warning('请选择一个底级节点再进行操作！')
    return
  }
  fpDesignRef.value.handleAdd({
    formType: activeData.code,
    formTypeName: activeData.name
  })
}

const formRow = {
  "formId": "604553C989504D4187A534BCDB7B74BC",
  "name": "示例表单-专项申报",
  "formType": "06",
  "formTypeName": "其它",
  "code": "case_form_zxsb",
  "status": 0,
  "orderNum": 70,
  "remark": null,
  "createTime": "2024-10-21 14:00:58",
  "prdFormContent": null
}
const formRow2 = {
  "formId": "5D51203DB1DC4F6694F87A3C2CB4ABBB",
  "name": "项目申报-专项项目（新建项目）",
  "formType": "01",
  "formTypeName": "储备项目",
  "code": "special_reserve_form_anhui",
  "status": 1,
  "orderNum": 2,
  "remark": "申报表单-专项项目（新建项目）",
  "createTime": "2024-01-30 17:53:25",
  "prdFormContent": null
}
/**
 * 修改
 */
const handleEdit = (row) => {
  fpDesignRef.value.handleEdit(row)
}
const handlePreview = (row) => {
  fpPreviewRef.value.handleOpen(row)
}


const handlePress = () => {
  const text = 'Hello PressUtils'
  let v1 = PressUtils.compressData(text)
  let v2 = PressUtils.compressData(formRow)
  let v3 = PressUtils.compressData(tableAttrs.columns)

  console.log('压缩后：', { v1, v2, v3 })

  let d1 = PressUtils.decompressData(v1)
  let d2 = PressUtils.decompressData(v2)
  let d3 = PressUtils.decompressData(v3)

  console.log('解压后：', { d1, d2, d3 })
}

const handleEncrypt = () => {
  const text = 'Hello Sm4Util'
  console.log('加密前结果', text)
  let encryptText = SM4Utils.encrypt(text)
  console.log('加密后结果', encryptText)
  let decryptText = SM4Utils.decrypt(encryptText)
  console.log('解密后结果', decryptText)
}

</script>

<style lang="scss" scoped>
.hm-aside {
  height: 100%;
  display: flex;
  flex-direction: column;
  &-header {
    height: 50px;
    padding: 0 10px;
    border-bottom: 1px solid #dadada;
    display: flex;
    align-items: center;
    .header-label {
      font-size: 16px;
      font-weight: 600;
    }
    .header-tools {
      margin-left: auto;
      .el-icon {
        color: var(--el-color-primary);
        cursor: pointer;
      }
    }
  }
  &-content {
    flex: 1;
    min-height: 100px;
  }
}
</style>